<template>
  <div v-loading="loading" class="echarts-data" style="margin-bottom: 40px">
    <div class="info">
      <!-- 步数 -->
      <div class="info-title" v-if="chartsType === 'step'">
        {{ detail.step || 0 }}
        <span>步</span>
      </div>
      <!-- 睡眠 -->
      <div class="info-title" v-if="chartsType === 'sleep'">
        {{ detail.hour }} <span>小时</span>{{ detail.minute }}<span>分钟</span>
      </div>
      <!-- 心率 -->
      <div class="info-title" v-if="chartsType === 'xinlv'">
        {{ detail.xinlv || 0 }}
        <span>次/分</span>
      </div>
      <!-- 血压 -->
      <div class="info-title" v-if="chartsType === 'pressure'">
        {{ detail.shuzhangya || 0 + "/" + (detail.shousuoya || 0) }}
        <span>mmHg</span>
      </div>
      <!-- 血氧 -->
      <div class="info-title" v-if="chartsType === 'blood'">
        {{ detail.xueyang || 0 }}
        <span>%</span>
      </div>
      <el-button type="primary" @click="
          $router.push({ path: '/motion', query: { deviceId: deviceId } })
        " plain>列表数据</el-button>
    </div>
    <!-- 血压 -->
    <div v-if="chartsType === 'pressure'">
      <div style="position: relative">
        <div class="progress shuzhangya" v-if="progress.shuzhangya" style="margin-bottom: 30px">
          <div v-for="(item, index) in progress.shuzhangya.list" :style="{
              width: (item / progress.shuzhangya.interval) * 100 + '%',
            }" :key="index" class="progress-part"></div>
        </div>
        <div v-if="progress.shuzhangya" class="point" :style="{
            left:
              ((Number(detail.shuzhangya - progress.shuzhangya.min) /
                progress.shuzhangya.interval) *
                100 >
              100
                ? 100
                : (Number(detail.shuzhangya - progress.shuzhangya.min) /
                    progress.shuzhangya.interval) *
                  100) + '%',
          }">
          {{ detail.shuzhangya }}
        </div>
      </div>
      <div style="position: relative">
        <div class="progress shousuoya" v-if="progress.shousuoya">
          <div v-for="(item, index) in progress.shousuoya.list"
            :style="{ width: (item / progress.shousuoya.interval) * 100 + '%' }" :key="index" class="progress-part">
          </div>
          <div class="point">
            <span>{{ detail.shousuoya }}</span>
          </div>
        </div>
        <div v-if="progress.shousuoya" class="point" :style="{
            left:
              ((Number(detail.shousuoya - progress.shousuoya.min) /
                progress.shousuoya.interval) *
                100 >
              100
                ? 100
                : (Number(detail.shousuoya - progress.shousuoya.min) /
                    progress.shousuoya.interval) *
                  100) + '%',
          }">
          {{ detail.shousuoya }}
        </div>
      </div>
    </div>
    <!-- 其它 -->
    <div v-else style="position: relative">
      <div class="progress">
        <div v-for="(item, index) in progress.list" :style="{ width: (item / progress.interval) * 100 + '%' }"
          :key="index" class="progress-part"></div>
      </div>
      <!-- 步数-锚点 -->
      <div class="point" :style="{ left: (Number(detail.step) / progress.interval) * 100 + '%' }"
        v-if="chartsType === 'step'">
        {{ detail.step }}
      </div>
      <!-- 心率-锚点 -->
      <div class="point" :style="{
          left:
            ((Number(detail.xinlv - progress.min) / progress.interval) * 100 >
            100
              ? 100
              : (Number(detail.xinlv - progress.min) / progress.interval) *
                100) + '%',
        }" v-if="chartsType === 'xinlv'">
        {{ detail.xinlv }}
      </div>
      <!-- 血氧-锚点 -->
      <div class="point" :style="{
          left:
            (Number(detail.xueyang - progress.min) / progress.interval) * 100 >
            0
              ? (Number(detail.xueyang - progress.min) / progress.interval) *
                100
              : 0 + '%',
        }" v-if="chartsType === 'blood'">
        {{ detail.xueyang }}
      </div>
    </div>
    <div class="tips" style="display: none">
      <div class="tips-data" v-if="chartsType === 'xinlv'">
        {{ detail.newTime }} 最高/低 {{ detail.maxXinlv || 0 }}/{{
          detail.minXinlv || 0
        }}
        次/分
      </div>
      <div class="tips-data" v-if="chartsType === 'step'">
        {{ detail.newTime }} {{ detail.km }}公里 {{ detail.kcal || 0 }}千卡
      </div>
      <div class="tips-data" v-if="chartsType === 'pressure'">
        {{ detail.newTime }} <br />
        舒张压最高/低{{
          detail.maxShuzhangya || 0 + "/" + (detail.minShuzhangya || 0)
        }}
        mmHg 收缩压最高/低{{
          detail.maxShousuoya || 0 + "/" + (detail.minShousuoya || 0)
        }}
        mmHg
      </div>
      <div class="tips-data" v-if="chartsType === 'blood'">
        {{ detail.newTime }} 最高/低
        {{ detail.maxXueyang || 0 + "%/" + (detail.minXueyang || 0) + "%" }}
      </div>
      <div class="tips-data" v-if="chartsType === 'sleep'">
        深睡：{{detail.deephoue || 0}}小时{{detail.deepminute || 0}}分钟
        浅睡：{{detail.shallowhoue || 0}}小时{{detail.shallowminute || 0}}分钟
      </div>r
      <div class="tips-num">报警：{{alertNum}}次</div>
    </div>
    <div class="time-tab">
      <el-radio-group v-model="timeTab" @change="handleChangeTab">
        <el-radio-button label="day">天</el-radio-button>
        <el-radio-button label="week">周</el-radio-button>
        <el-radio-button label="month">月</el-radio-button>
        <!--        <el-radio-button label="year">年</el-radio-button>-->
      </el-radio-group>
    </div>
    <div :ref="chartsType" class="charts"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import elementResizeDetectorMaker from "element-resize-detector";

  export default {
    data() {
      return {
        timeTab: "day",
        detail: {},
        loading: false,
      };
    },
    props: {
      chartsType: {
        type: String,
        default: "xinlv",
      },
      info: {
        type: Object,
        default: () => {
          return {};
        },
      },
      progress: {
        type: Object,
        default: () => {
          return {};
        },
      },
      deviceId: {
        type: String,
        default: "",
      },
      alertNum: {
        type: Number,
        default: 0
      }
    },
    mounted() {},
    methods: {
      init() {
        console.log(this.chartsType, this.info);
        this.loading = true
        this.detail = this.info.detail;
        let myChart = echarts.init(this.$refs[this.chartsType]);
        myChart.setOption(this.info.option);
        let erd = elementResizeDetectorMaker();
        erd.listenTo(this.$el, (e) => {
          this.$nextTick(() => {
            myChart.resize();
          });
        });
        this.loading = false;
      },
      handleChangeTab(val) {
        this.$emit("changeType", {
          type: this.chartsType,
          val
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .echarts-data {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 20px;
    border-radius: 10px;
  }

  .info {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 30px;

    .info-title {
      font-size: 48px;

      span {
        font-size: 14px;
      }
    }
  }

  .progress {
    height: 10px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;

    .progress-part {
      height: 100%;
    }

    .progress-part:first-child {
      background-color: rgba(159, 250, 250, 1);
    }

    .progress-part:nth-child(2) {
      background-color: rgba(114, 235, 235, 1);
    }

    .progress-part:nth-child(3) {
      background-color: rgba(51, 209, 209, 1);
    }

    .progress-part:nth-child(4) {
      background-color: rgba(41, 173, 173, 1);
    }

    .progress-part:nth-child(5) {
      background-color: rgba(0, 128, 128, 1);
    }
  }

  .point {
    position: absolute;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background-color: rgba(112, 182, 3, 1);
    color: #fff;
    font-size: 14px;
    top: -25px;
    transform: translateX(-50%);
  }

  .tips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .tips-data {
      font-size: 14px;
      color: #7f7f7f;
    }

    .tips-num {
      font-size: 14px;
      color: #333;
    }
  }

  .charts {
    height: 400px;
  }
</style>
